<template>
  <div class="internship-container">
    <el-card shadow="never">
      <!-- Search Bar -->
      <div class="filter-header">
        <el-input 
          v-model="filter.id" 
          placeholder="编号"
          style="width: 120px"
          class="filter-item"
          clearable 
          @keyup.enter="handleSearch" 
        />
        <el-input 
          v-model="filter.name" 
          placeholder="名称"
          style="width: 140px; margin-left: 10px"
          class="filter-item"
          clearable 
          @keyup.enter="handleSearch" 
        />
        <el-input 
          v-model="filter.company" 
          placeholder="实习单位"
          style="width: 160px; margin-left: 10px"
          class="filter-item"
          clearable 
          @keyup.enter="handleSearch" 
        />
        <el-button 
          type="primary" 
          style="margin-left: 15px; border-radius: 4px"
          @click="handleSearch"
        >
          <i class="el-icon-search"></i> 搜索 
        </el-button>
        <el-button 
          type="primary" 
          style="margin-left: 10px; border-radius: 4px"
          @click="resetSearch"
        >
          <i class="el-icon-refresh"></i> 重置 
        </el-button>
      </div>
 
      <!-- Data Table -->
      <el-table 
        :data="filteredData"
        style="width: 100%"
        header-row-class-name="table-header"
        stripe 
      >
        <el-table-column prop="id" label="编号" width="80" align="center"/>
        <el-table-column prop="name" label="名称" width="120"/>
        <el-table-column prop="start_time" label="开始时间" width="120" align="center"/>
        <el-table-column prop="end_time" label="结束时间" width="120" align="center"/>
        <el-table-column prop="company" label="实习单位名称" width="180"/>
        <el-table-column prop="company_info" label="实习单位简介" width="180" show-overflow-tooltip/>
        <el-table-column prop="weekly_score" label="周班成绩" width="120" align="center"/>
        <el-table-column prop="total_score" label="总成绩" width="120" align="center"/>
        <el-table-column label="最终成绩" width="120" align="center">
          <template #default="scope">
            <el-tag 
              :type="getScoreTagType(scope.row.final_score)" 
              effect="dark"
            >
              {{ scope.row.final_score  }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
 
      <!-- Pagination Info -->
      <div class="custom-pagination">
        <span class="pagination-text">第1 到 {{ filteredData.length  }} 条，共 {{ filteredData.length  }} 条记录。</span>
      </div>
    </el-card>
  </div>
</template>
 
<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
 
// Reactive state 
const filter = reactive({
  id: '',
  name: '',
  company: ''
})
 
const tableData = ref([
  {
    id: 3,
    name: '生产实习',
    start_time: '2022-01-02',
    end_time: '2022-02-28',
    company: '华为',
    company_info: '华为技术有限公司是一家生产销售通信设备的民营通信科技公司，总部位于中国广东省深圳市。',
    weekly_score: 21,
    total_score: 100,
    final_score: '及格'
  },
  {
    id: 4,
    name: '软件开发实习',
    start_time: '2022-03-01',
    end_time: '2022-05-31',
    company: '阿里巴巴',
    company_info: '阿里巴巴集团控股有限公司是中国的跨国科技公司，提供电子商务、零售互联网、科技和金融服务。',
    weekly_score: 25,
    total_score: 95,
    final_score: '良好'
  },
  {
    id: 5,
    name: '市场营销实习',
    start_time: '2022-06-01',
    end_time: '2022-08-31',
    company: '腾讯',
    company_info: '腾讯控股有限公司是一家中国跨国企业集团和控股公司，其子公司专门从事各种与互联网相关的服务和产品。',
    weekly_score: 30,
    total_score: 90,
    final_score: '优秀'
  }
])
 
// Computed properties 
const filteredData = computed(() => {
  return tableData.value.filter(item  => {
    return (
      (!filter.id  || item.id.toString().includes(filter.id))  &&
      (!filter.name  || item.name.includes(filter.name))  &&
      (!filter.company  || item.company.includes(filter.company)) 
    )
  })
})
 
// Methods 
const handleSearch = () => {
  ElMessage({
    message: '搜索完成',
    type: 'success',
    duration: 1000 
  })
}
 
const resetSearch = () => {
  filter.id  = ''
  filter.name  = ''
  filter.company  = ''
  ElMessage({
    message: '已重置搜索条件',
    type: 'info',
    duration: 1000 
  })
}
 
const getScoreTagType = (score) => {
  switch(score) {
    case '优秀': return 'success'
    case '良好': return 'primary'
    case '及格': return 'warning'
    default: return 'info'
  }
}
</script>
 
<style scoped>
.internship-container {
  padding: 20px;
}
 
.filter-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
 
.filter-item {
  margin-left: 10px;
}
 
.table-header th {
  background-color: #f5f7fa !important;
  font-weight: 600;
  color: #606266;
}
 
.custom-pagination {
  margin-top: 20px;
  text-align: right;
  padding: 10px 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}
 
.pagination-text {
  color: #909399;
  font-size: 13px;
  letter-spacing: 0.5px;
}
 
.el-tag {
  padding: 0 12px;
  height: 28px;
  line-height: 26px;
  font-size: 13px;
  font-weight: bold;
}
 
.el-button [class*="el-icon-"] {
  margin-right: 5px;
}
</style>